<template>
	<view class="admin-change-record-list">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="content-wrap">
			<view class="title-search">
				<div class="ipt-wrap">
					<view style="min-width: 130rpx;">
						<uni-data-select placeholder="涉废类型" v-model="queryParams.devicetype" :localdata="adviceTypeList"
							:clear="true"></uni-data-select>
					</view>
					<view class="line"></view>
					<view>
						<uni-data-select placeholder="状态" v-model="queryParams.status" :localdata="statusList"
							:clear="true"></uni-data-select>
					</view>
					<view class="line"></view>
					<input type="text" placeholder-class="ipt-class" v-model="queryParams.devicename"
						placeholder="请输入设施名称" />
				</div>
				<button class="search" @click="getList">查询</button>

			</view>
			<view class="total-data">
				共 <text>{{total || 0}}</text> 条记录
			</view>
			<view class="list">
				<noData v-if="dataList.length==0" />
				<view class="item" v-for="item in dataList" :key="item.id">
					<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/beijing-icon.png"
						mode=""></image>
					<view class="title-wrap">
						企业名称：{{enterpriseList?.find((i)=>i.id==item.enterpriseid)?.customername }}
					</view>
					<view class="data-line">
						<view class="left">设施编号：{{item.devicecode}}</view>
						<view class="right">更换周期：{{item.recircledays}}天</view>
					</view>
					<view class="data-line">
						<view class="left">设施状态：{{item.status==1?'启动':'停用'}}</view>
						<view class="right">安装位置：{{item.installposition}}</view>
					</view>
					<view class="data-line">
						<view class="left">预计更换时间：{{item.nextchangeday || '无'}}</view>

					</view>

					<view class="btn-wrap">
						<button class="change" @click="handleChange(item.devicecode,item.id)">更换</button>
						<button class="record" @click="changeRecord(item.enterpriseid,item.devicecode)">记录</button>
					</view>
				</view>







			</view>
		</view>

	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import noData from '../../components/noDataShow.vue'
	import http from '../../request/index'
	import uploadFile from '../../request/uploadFile.js'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue'
	let adviceTypeList = ref([])
	let statusList = ref([])
	let enterpriseList = ref([])
	let total = ref('')
	let queryParams = reactive({})
	let dataList = ref([])
	let id = ref('')
	let name = "企业设施"
	onLoad((e) => {
		id.value = e.enterparseid

	})
	onShow(() => {
		getList()
	})
	let getList = () => {
		http({
			url: '/device/datalist',
			data: {
				...queryParams,
				enterpriseid: id.value
			}
		}).then((res) => {
			if (res.code == 0) {
				total.value = res.data.total
				dataList.value = res.data.list
			}
		})
	}
	let changeRecord = (enterpriseid, deviceid) => {
		uni.navigateTo({
			url: `/contorllerPageOther/adminenterprisechangerecordlist/adminenterprisechangerecordlist?enterpriseid=${enterpriseid}&deviceid=${deviceid}`
		})
	}
	let handleChange = (code,id) => {
		uni.navigateTo({
			url: `/contorllerPageOther/adminAddDevice/adminAddDevice?add=1&code=${code}&id=${id}`
		})
	}
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B03'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			adviceTypeList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}

	})
	http({
		url: '/enterprise/datalist'
	}).then((res) => {
		if (res.code == 0) {
			enterpriseList.value = res.data.list
		}
	})
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B02'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			statusList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}

	})
</script>

<style lang="scss" scoped>
	:deep(.ipt-class) {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}

	:deep(.uni-select) {
		border: none !important;
		font-weight: 400;
		font-size: 25rpx;
		color: #333333;

	}

	:deep(.uni-date__x-input) {
		font-weight: 400;
		font-size: 25rpx;
		color: #333333;
		text-align: center;
	}

	:deep(.input-value-border) {
		border: none !important;
	}

	:deep(.uni-date-editor--x) {
		border: none;
	}

	:deep(.placeholder) {
		font-weight: 400;
		font-size: 25rpx;
		color: #333333;
	}

	.admin-change-record-list {
		width: 100vw;
		height: 100vh;

		.title-bgc {
			width: 750rpx;
			height: 160rpx;
			background: #0874FA;
		}

		.content-wrap {
			width: 100vw;
			height: calc(100vh - 160rpx);
			background-color: #F3F5F7;

			.list {
				height: calc(100vh - 160rpx - 200rpx);
				overflow: scroll;
				display: flex;
				align-items: center;
				flex-direction: column;


				.item:nth-of-type(1) {
					margin-top: 0 !important;
				}

				.item {
					margin-top: 22rpx;
					padding-left: 40rpx;

					width: 690rpx;
					height: 440rpx !important;
					background: #FFFFFF;
					border-radius: 14rpx;
					display: flex;
					flex-direction: column;

					flex-shrink: 0;
					position: relative;

					image {
						width: 100%;
						position: absolute;
						left: 0;
						top: 90rpx;
						height: 25rpx;


					}

					.title-wrap {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 102rpx;
						line-height: 102rpx;


						font-weight: 500;
						font-size: 31rpx;
						color: #222222;




					}

					.data-line {
						display: flex;
						margin-top: 32rpx;
						padding-right: 70rpx;
						justify-content: space-between;
						align-items: center;

						.left {
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;

						}

						.right {

							font-weight: 400;
							font-size: 28rpx;
							color: #666666;
							flex-shrink: 0;

						}
					}

					.btn-wrap {
						margin-top: 32rpx;
						display: flex;
						align-items: center;

						.change {
							width: 163rpx;
							height: 55rpx;
							background: #DCEBFE;
							border-radius: 27rpx;
							font-weight: 500;
							font-size: 28rpx;
							color: #0874FA;
							line-height: 55rpx;

						}

						.record {
							margin-left: 65rpx;
							width: 163rpx;
							height: 55rpx;
							background: #D2F7E6;

							font-weight: 500;
							font-size: 28rpx;
							color: #369E64;
							line-height: 55rpx;
							border-radius: 27rpx;
						}
					}
				}
			}

			.total-data {

				font-weight: 400;
				font-size: 23rpx;
				color: #333333;
				margin-bottom: 22rpx;
				padding-left: 30rpx;

				text {
					color: #0874FA;
				}
			}

			.title-search {
				padding: 27rpx 22rpx 22rpx 22rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.ipt-wrap {
					width: 574rpx;
					height: 67rpx;
					background: #FFFFFF;
					border-radius: 34rpx;
					display: flex;
					align-items: center;
					padding-left: 30rpx;


					input {
						flex: 1;
						padding-left: 20rpx;
						font-size: 23rpx;
					}

					.line {
						width: 1rpx;
						height: 35rpx;
						background: #E8E8E8;
						margin-left: 16rpx;
						margin-right: 10rpx;
					}
				}

				.search {
					width: 118rpx;
					height: 67rpx;
					background: #0874FA;
					border-radius: 34rpx;
					font-weight: 400;
					font-size: 25rpx;
					color: #FFFFFF;
					line-height: 67rpx;
				}

				.add {
					width: 118rpx;
					height: 67rpx;
					background: #0874FA;
					border-radius: 34rpx;
					font-weight: 400;
					font-size: 25rpx;
					color: #FFFFFF;
					line-height: 67rpx;
				}

				.filtrate {
					display: flex;
					align-items: center;
					margin-left: 19rpx;

					image {
						width: 31rpx;
						height: 33rpx;
						margin-right: 10rpx;
					}

					text {


						font-weight: 500;
						font-size: 25rpx;
						color: #212121;

					}
				}
			}
		}
	}
</style>